<template>
  <form>
    <legend>编辑英雄</legend>
    <div class="form-group">
      <label>英雄名称</label>
      <input v-model="hero.heroName" type="text" class="form-control" />
    </div>
    <div class="form-group">
      <label>英雄性别</label>
      <div>
        <input type="radio" value="男" v-model="hero.gender" /> 男
        <input type="radio" value="女" v-model="hero.gender" /> 女
      </div>
    </div>
    <button class="btn btn-primary" @click.prevent="hSave">提交</button>
  </form>
</template>
<script>
export default {
  data() {
    return {
      id: this.$route.params.id,
      hero: {
        heroName: "",
        gender: "",
        cTime: Date.now()
      },
    };
  },
  created() {
      this.loadHeroDetail()
  },
  methods: {
    loadHeroDetail() {
      this.$http(`heroes/${this.id}`).then(({ gender, heroName }) => {
        this.hero.heroName = heroName
        this.hero.gender = gender
      });
    },
    hSave() {
        this.$http(`heroes/${this.id}`, 'put', this.hero).then(res => {
            this.$router.push('/')
        })
    }
  },
};
</script>